//Vue 组件 与vue 对象的语法基本一致
Vue.component("star", {
  template: `
<div>
<header id="header" class="">
    <div class="topwrap">
      <hgroup class="hwrap">
        <!-- <h1 class="logowrap">
          <a href=""
            ><img
              id="logo-img20200403"
              src="static/cdn20210830064043/v2/images/logo.png"
              width="151"
              height="71"
              alt="同城约会"
          /></a>
        </h1>
        <h1 class="festlogowrap">
          <a href=""
            ><img
              src="images/blank.gif"
              width="360"
              height="99"
              alt="同城约会"
          /></a>
        </h1> -->
        <h2 class="sublogowrap">
          <span class="sublogo1">星辰交友</span>
        </h2>
      </hgroup>
      <div class="tipswrap">
        <div class="links">
        <div class="loginwrap">
        <slot v-if="!myinfo" name="nologin">
            <a href="login.html?to=reg" >免费注册</a> |
            <a href="login.html" >请登录</a>
          
        </slot>
        <slot v-else name="logined" v-bind:m="myinfo">
            <p >欢迎 {{myinfo.username}}</p> <a @click="logout">退出</a>
            <p style="display: none;" class="user-id">{{myinfo.id}}</p>
        </slot>
        </div>
          <div class="cmlinks">
            | <a>手机版</a> |
            <a target="_blank"
              ><span class="icon24 icon24-iphone"></span>手机客户端</a
            >
          </div>
        </div>
      </div>
    </div>
    <div class="nav1ext"></div>
    <div class="nav1wrap">
      <nav class="js-nav1 nav nav1">
        <h1 class="hidden">一级导航</h1>
        <ul>
          <li class="first"><a href="index.html">首页</a></li>
<!--          <li class="">-->
<!--            <a href="activity.html">活动广场</a>-->
<!--          </li>-->
          <li class="">
            <a href="team.html">我的队伍</a>
          </li>
          <li class="">
            <a href="friend.html">我的好友</a>
          </li>
          <li class="last">
            <a href="myinfo.html">个人空间</a>
          </li>
        </ul>
      </nav>
      <div class="shadow shadow-l"></div>
      <div class="shadow shadow-r"></div>
    </div>
    
  </header>
  <slot>默认插槽</slot>
  <div class="wrap" id="footer">ljl &copy; 版权所有</div>
  
</div>
  `,
  //vue 组件内部的data推荐使用函数式语法
  data() {
    return{
      myinfo: null, // 假设初始状态为未登录
      ws: null
    }

  },
  //$emit  发布自定义事件
  created() {
    axios.get("/user/user/myInfo").then(res => {
      if (res.data.code == 1) {
        this.myinfo = res.data.data;
        console.log(this.myinfo.username);
      } else if (res.data.code == 2) {
        this.myinfo = res.data.data;
      } else {
        this.myinfo = null;
      }
    })
  },
  methods: {
    logout(){
      let username = sessionStorage.getItem("username");
      this.ws = new WebSocket("ws://127.0.0.1:8003/talk/" + username );
      // this.ws.close();
      let token = sessionStorage.getItem("Token");
      axios.get("/user/user/logout?uid="+this.myinfo.id,
          {headers:
                {'Token': token }
          }
      ).then(res => {
        if (res.data.code ==1){
          location.href="index.html";
        }
      })
    }
  },
});
